<template>
  <el-container class="el-container is-vertical">
    <header class="el-header header-and-footer" style="height: 60px">
      <el-row type="flex" justify="start" align="middle" style="height: 100%">
        <el-col v-if="!hasRoom" :span="24" style="text-align: left">
          {{ appNameCN }}
        </el-col>
        <el-col v-else :span="12" style="text-align: left">
          <el-row
            type="flex"
            justify="start"
            align="middle"
            style="height: 100%"
          >
            <el-col :span="12">
              <el-button
                type="info"
                @click="onClickExit"
                icon="el-icon-back"
                circle
              ></el-button>
              离开
            </el-col>
            <el-col :span="12"
              >总共有<span>{{ userCount }}</span
              >人
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </header>
    <el-main style="overflow: hidden; padding: 0">
      <Login v-if="!networkOk || !logged || !hasRoom" />
      <MainWindow v-if="networkOk && logged && hasRoom" />
    </el-main>
    <footer class="el-footer header-and-footer" style="height: 60px">
      <el-row type="flex" justify="center" align="middle" style="height: 100%">
        author: {{ author }}, {{ appNameCN }} server present by FastDo
      </el-row>
    </footer>

    <div
      v-if="blockCount > 0"
      id="blocker"
      class="blocker"
      @click="onClickBlocker"
    ></div>
  </el-container>
</template>

<script>
// import HelloWorld from './components/HelloWorld.vue'
import MainWindow from "./components/main_window.vue";
import Login from "./components/login.vue";
import config from "./js/config";
import cacheData from "./js/data";
import network from "./js/network";
import Message from "./js/message";
import { ElMessage } from "element-plus";
import eruda from "eruda";
import { ref } from "vue";

export default {
  name: config.AppName,
  components: {
    MainWindow,
    Login,
  },
  created() {
    if (typeof eruda !== "undefined") {
      eruda.init();
    }

    cacheData.app = this;
    this.logged = cacheData.isLogged;
    cacheData.on("onLogin", this.onLogin, this);
    cacheData.on("onLogout", this.onLogout, this);
    cacheData.on("onRoomIn", this.onRoomIn, this);
    cacheData.on("onRoomOut", this.onRoomOut, this);

    network.on("onOpen", this.onNetWorkOpen, this);
    network.on("onClose", this.onNetWorkClose, this);
    // network.connect();

    cacheData.on("onBlockerCountChange", this.onBlockerCountChange, this);
  },
  unmounted() {
    network.off(this);
    cacheData.off(this);
  },
  data() {
    return {
      blockCount: 0,
      author: config.author,
      appNameCN: config.AppNameCN,
      networkOk: false,
      logged: false,
      hasRoom: false,

      userCount: cacheData?.roomInfo?.userList?.length || 0,
    };
  },
  methods: {
    updateUserCount() {
      this.userCount = cacheData?.roomInfo?.userList?.length || 0;
    },
    onBlockerCountChange(count) {
      //遮罩计数变化
      this.blockCount = count;
    },
    onLogin() {
      this.logged = true;
      //TODO: 选择房间。

      //进入房间
      let msg = new Message(Message.Type.CMUserIn);
      network.sendMessage(msg);
    },
    onLogout() {
      this.logged = false;
    },
    onRoomIn() {
      this.hasRoom = true;
    },
    onRoomOut() {
      this.hasRoom = false;
    },
    onClickBlocker() {},
    onNetWorkOpen() {
      this.networkOk = true;
    },
    onNetWorkClose() {
      this.networkOk = false;
      this.msgBox("链接已关闭。", "error");
    },
    onClickExit() {
      if (!cacheData.hasRoom) {
        this.msgBox("没有进入房间", "warnning");
        return;
      }
      this.blockCount++;
      network.waitForMessage(Message.Type.MCLogout, () => {
        this.blockCount--;
      });
      let msg = new Message(Message.Type.CMLogout);
      network.sendMessage(msg);
    },
  },
  computed: {},
  setup() {
    const active = ref(0);
    return {
      active,
      msgBox(text, type) {
        if (type) {
          ElMessage({
            message: text,
            type: type,
          });
        } else {
          ElMessage(text);
        }
      },
    };
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  /* margin-top: 60px; */
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

.header-and-footer {
  background: #255b92;
  color: white;
}

body,
html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  position: fixed;
}

.el-container {
  width: 100%;
  height: 100%;
}
.el-main {
  padding: 0px;
}

.sub-text {
  font-size: 0.6em;
  color: #909399;
}

.blocker {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}
</style>
